<template>
  <view-box ref="viewBox" class="container" body-padding-bottom="0">
    <tab :line-width="2" :scroll-threshold="5" v-model="type">
      <tab-item @on-item-click="changeFilter()">全部</tab-item>
      <tab-item @on-item-click="changeFilter()">待付款</tab-item>
      <tab-item @on-item-click="changeFilter()">待发货</tab-item>
      <tab-item @on-item-click="changeFilter()">待收货</tab-item>
      <tab-item @on-item-click="changeFilter()">已完成</tab-item>
    </tab>
    <div class="list">
      <div class="order-container" v-for="(order, index) in list" :key="index">
        <div class="order-top-bar">
          <div class="order-shop-name">天南山文化</div>
          <div class="order-status">{{order.order_status_desc}} / {{order.pay_status_desc}} / {{order.shipping_status_desc}}</div>
        </div>
        <div class="row-box" :class="[order.order_goods.length - 1 !== i ? 'vux-1px-b' : '']" v-for="(goods, i) in order.order_goods" :key="i">
          <div class="p-img">
            <img :src="goods.goods_thumb" alt="">
          </div>
          <div class="p-info">
            <div>
              <div class="p-name">
                {{goods.goods_name}}
              </div>
              <div class="p-spec">
                {{goods.spec_value}}
              </div>
            </div>
          </div>
        </div>
        <div class="order-bottom-bar">
          <div class="order-info vux-1px-b">
            共{{order.product_num}}件商品 实付款：<span>￥{{order.order_amount}}</span>
          </div>
          <div class="order-btn">
            <!-- <x-button plain mini @click.native="jump(qq)">联系客服</x-button> -->
            <!-- <x-button plain mini v-if="order.order_status === 'FINISHED'">申请售后</x-button> -->
            <x-button @click.native="comment(order)" plain mini class="btn-red"  v-if="order.order_status === 'FINISHED'">发表评价</x-button>
            <x-button plain mini class="btn-red"  v-if="(order.pay_status === 1 || order.pay_code === 'COD') && order.shipping_status === 1 && order.order_status === 'CONFIRMED'" @click.native="finish(order)">确认收货</x-button>
            <x-button plain mini class="btn-red" v-if="order.pay_status === 0 && order.order_status === 'UNCONFIRMED'" @click.native="pay(order.id)">立即支付</x-button>
          </div>
        </div>
      </div>
    </div>
    <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
      <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
      <empty slot="no-results" tips="暂时没有相关订单"></empty>
    </infinite-loading>
  </view-box>
</template>
<script>
  import { ViewBox, XButton, Tab, TabItem } from 'vux'
  import { QQ_KEFU_URL } from '@/config'
  export default {
    data () {
      return {
        qq: QQ_KEFU_URL,
        list: [],
        type: 0

      }
    },
    created () {
      this.type = parseInt(this.$route.query.type)
    },
    computed: {
      url () {
        if (this.type === 1) {
          return '/my_orders?pay_status=0'
        }
        if (this.type === 2) {
          return '/my_orders?shipping_status=0&order_status=CONFIRMED'
        }
        if (this.type === 3) {
          return '/my_orders?shipping_status=1&order_status=CONFIRMED'
        }
        if (this.type === 4) {
          return '/my_orders?shipping_status=1&order_status=FINISHED'
        }
        return '/my_orders'
      }
    },
    components: {
      ViewBox,
      XButton,
      Tab,
      TabItem
    },
    methods: {
      jump (url) {
        if (url) {
          location.href = url
        }
      },
      comment (order) {
        this.$router.push('/order_goods?action=comment')
      },
      finish (order) {
        const _this = this
        this.$vux.confirm.show({
          title: '确认收货',
          content: '请确保已收到商品',
          onConfirm () {
            _this.$vux.loading.show()
            _this.$http.put('/orders/' + order.id + '/finish').then((response) => {
              order.order_status = 'FINISHED'
              _this.$vux.toast.show('收货成功')
              _this.$vux.loading.hide()
              _this.type = 'finished'
            }).catch((error) => {
              console.log(error)
              _this.$vux.loading.hide()
            })
          }
        })
      },
      pay (id) {
        let json = {}
        let callpay = () => {
          if (typeof WeixinJSBridge === 'undefined') {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
            }
          } else {
            onBridgeReady()
          }
        }
        let onBridgeReady = () => {
          WeixinJSBridge.invoke('getBrandWCPayRequest', json, (res) => {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              this.$router.replace('/orders?type=2')
            } else {
              this.$router.replace('/orders?type=1')
            }
          })
        }
        this.$http.get('/pay/wxpay-' + id).then((response) => {
          json = response.data
          callpay()
        }).catch((error) => {
          console.log(error)
        })
      },
      changeFilter () {
        this.list = []
        this.$nextTick(() => {
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
        })
      },
      infiniteHandler ($state) {
        this.$http.get(this.url, {
          params: {
            page: this.list.length / 20 + 1,
            page_size: 20
          }
        }).then((response) => {
          if (response.data.data.length) {
            this.list = this.list.concat(response.data.data)
            $state.loaded()
            if (!response.data.next_page_url) {
              $state.complete()
            }
          } else {
            $state.complete()
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .container {
    background-color:#f2f2f2;
  }
  .order-container {
    margin-top: 6px;
  }
  .order-top-bar {
    display: flex;
    justify-content: space-between;
    background: #fff;
    font-size: 14px;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    .order-status {
      color: #e02e24;
      font-size: 12px;
    }
  }
  .order-bottom-bar {
    background: #fff;
    text-align: right;
    font-size: 14px;
    .order-info {
      padding: 10px;
      span {
        font-weight: bold;
      }
    }
    .order-btn {
      padding: 10px;
      .weui-btn {
        margin-top: 0;
        border-radius: 2px;
        margin-left: 5px;
      }
      .weui-btn_mini {
        padding: 0 10px;
        line-height: 2;
      }
      .btn-red {
        border-color: @theme-color!important;
        color: @theme-color!important;
        &:active {
          border-color: rgba(206, 60, 57, 0.6)!important;
          color: rgba(206, 60, 57, 0.6)!important;
          background-color: transparent;
        }
      }
    }
  }
  .row-box {
    padding: 10px;
    display: flex;
    justify-content:space-between;
  }
  .p-img {
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
    width: 80px;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
  }
  .p-img img {
    width: 80px;
    height: 80px;
  }
  .row-box .p-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .row-box .p-info .p-name {
    font-size: 14px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #151516;
  }
  .p-spec {
    font-size: 12px;
    color: #9c9c9c;
  }
</style>